<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p2_外间距</title>
  <style>
    body{
      /*去掉body自带的外间距*/
      margin: 0;
    }
    .fu{
      background-color: rgba(255,255,0,.3);
        /* bfc结界 解决了子父粘连问题  首/尾元素的上/下外间距会超出父元素的范围*/
        overflow: hidden;
    }
    .fu>div{
      width: 100px;
      height: 100px;
        background-color: lime;
        border: 2px solid blue;
        color: white;
        font-size:25px;
        font-weight: bold;

    }
    /* 1.不会叠加，取最大值 */
    .z1{
        margin-bottom: 30px;
        margin-top: 50px;
    }
    .z2{
        margin-top: 50px;
    }
    .z3{
        margin: 10px;
        margin: 10px 20px;
        margin: 10px 20px 30px;
        margin: 10px 20px 30px 40px;
        /* 实现块级元素水平居中 */
        margin: 0 auto;
    }
    .z4{
        margin-bottom: 50px;
    }

    span{
        border: 2px solid red;
    }
    .s2{
        /* 行内元素垂直方向的外间距不生效 */
        margin: 30px;
    }
  </style>
</head>
<body>
<span>span1</span><span class="s2">span2</span><span>span3</span>
<!-- .fu.z*4 tab补全 -->
<div class="fu">
  <div class="z1">子元素一</div>
  <div class="z2">子元素二</div>
  <div class="z3">子元素三</div>
  <div class="z4">子元素四</div>
</div>
</body>
</html>